<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        全选:
        <input type="checkbox" name="" id="" class="check-all">
    </div>
    <div>
        单选:
        <input type="checkbox" name="" id="" class="check-one">
        <input type="checkbox" name="" id="" class="check-one">
        <input type="checkbox" name="" id="" class="check-one">
        <input type="checkbox" name="" id="" class="check-one">
        <input type="checkbox" name="" id="" class="check-one">
        <input type="checkbox" name="" id="" class="check-one">
    </div>
</body>
<script>
    // 全选
    // 点击全选  所有单选跟随全选的选中状态

    // 反选
    // 每次点击单选  => 判断所有的单选是否全部被选中
    //   全部被选中 => 全选选中
    //   存在未选中 => 没有全选(全选不选中)

    var checkAll = document.getElementsByClassName("check-all")[0];
    var checkOneList = document.getElementsByClassName("check-one");

    // 全选功能  => 点击全选  所有单选跟随全选的选中状态
    checkAll.onclick = function () {
        var status = this.checked;
        console.log(status);

        // 所有单选跟随全选的选中状态
        for (var i = 0; i < checkOneList.length; i++) {
            var checkOne = checkOneList[i];
            checkOne.checked = status;
        }
    }


    // 每次点击单选  => 判断所有的单选是否全部被选中

    // 页面加载时 => 循环绑定事件
    for (let i = 0; i < checkOneList.length; i++) {
        let checkOne = checkOneList[i];
        checkOne.onclick = function () {
            console.log(this);

            var flag = true; //假设全部被选中
            
            // 点击单选时 => 判断所有的单选是否全部被选中
            for (var j = 0; j < checkOneList.length; j++) {
                var item = checkOneList[j];

                // !item.checked === true  =>   item.checked === false
                if(!item.checked){ // 如果存在未选中的 => false
                    flag = false;
                    break;
                }
            }

            checkAll.checked = flag;

        }
    }


</script>

</html>